<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>登录</title>
  <!--Semantic_ui框架-->
  <link rel="stylesheet" th:href="@{Semantic-UI/semantic.css}">
  <!--登录注册窗口样式-->
  <link rel="stylesheet" type="text/css" th:href="@{css/login.css}">
  <!--背景动态样式-->
  <link th:href="@{css/index.css}" rel="stylesheet" type="text/css">
</head>
<body style="overflow: hidden">
  <div class="register_bg" style="height: 100%;"><img width="100%" th:src="@{img/bg.jpg}"></div>
  <div class="canvas_bg" id="canvasBg"><canvas class="pg-canvas" width="1149" height="948"></canvas></div>
  <div class="logo_window" style="height: 948px;">
    <div class="container">
    <form class="ui form segment" th:action="@{/login}" method="post" id="formId">
        <h1 class="ui header" align="center">理财应用</h1>
      <input type="hidden" value="" id="code" name="code">
      <div class="field">
        <div class="ui icon input">
          <input type="text" placeholder="请输入用户名" name="username" id="username">
          <i class="user icon"></i>
        </div>
        <!--提示信息(如果msg的值为空则不显示)-->
        <div class="ui message" style="display:none;padding-top:1px;padding-bottom:1px;margin-top:3px;" id="nameVerify">
          <p style="color: green"></p>
        </div>
      </div>
      <div class="field">
        <div class="ui icon input">
          <input type="password" placeholder="请输入密码" name="password" id="password" >
          <i class="lock icon"></i>
        </div>
      </div>
      <div class="field">
        <div class="ui input">
          <input type="text" placeholder="请输入验证码" style="width:60px" name="verify" id="verify">
          <!-- 验证码 显示 -->
          <img onclick="getvCode()" id="verifyimg" style="margin-left: 20px;"/>
        </div>
      </div>
      <div class="field">
        <a th:href="@{/register}">还没有账号? 去注册</a>
      </div>
      <div class="field" align="center">
          <button class="ui green button" type="submit" style="width:80%;align-content: center" id="login">立即登录</button>
      </div>
      <div class="ui error mini message"></div>
    </form>
    </div>
  </div>
</body>
  <script type="text/javascript" th:src="@{js/jquery2.0.js}" charset="utf-8"></script>
  <script type="text/javascript" th:src="@{js/jquery.particleground.min.js}"></script>
  <script type="text/javascript" th:src="@{Semantic-UI/semantic.js}"></script>
  <!--数据校验-->
  <script>
    $('input').blur(function(){
      $.ajax({
          url: "/user",
          type: "post",   //请求方式
          data: $("#formId").serialize(),
          dataType:"json",
          success: function (data){
              if(data.result=="false"){
                  $('#nameVerify').hide();
              }else{
                $("#nameVerify > p").html("提示：欢迎["+data.name+"]用户！");
                $('#nameVerify').show();
                  // $('#nameVerify').transition('fly left');
              }
          }
      })
    });
    $('.ui.form').form({
        inline: true,
        on: 'blur',
        fields: {
            username: {
                identifier: 'username',
                rules: [
                    {
                        type: 'empty',
                        prompt: '请输入你的用户名！'
                    }
                ]
            },
            password: {
                identifier: 'password',
                rules: [
                    {
                        type: 'empty',
                        prompt: '请输入你的密码！'
                    }
                ]
            },
            code: {
                identifier: 'code'
            },
            verify: {
                identifier: 'verify',
                rules: [
                    {
                        type: 'empty',
                        prompt: '请输入验证码！'
                    },
                    {
                        type: 'match[code]',
                        optional: true,
                        prompt: '验证码错误！'
                    }
                ]
            }
        },
        onSuccess: function(){
            if($("#nameVerify").css("display") === "block"){
                // 点击登陆验证
                loginCheck();
                return false;
            }else{
                alert("用户名错误！");
                window.location.href = "/login";
                return false;
            }
        },
        onFailure: function (){
            $(".prompt.label").css("float","left");
            // 刷新验证码
            getvCode();
            return false;
        }
    });
    
    function loginCheck(){
        $("#login").click(function () {
            console.log("登录验证");
            $.ajax({
                type: "POST",
                url: "/login",
                data: $("#formId").serialize(),
                dataType: "JSON",
                success: function (data) {
                    console.log(data);
                    if(data.code == "400"){
                        window.location.href = "/home";
                    }else if(data.code == "500"){
                        // response.getWriter().write(data.message);
                        alert(data.message);
                        window.location.href = "/login";
                    }else{
                        window.location.href = "/login";
                    }
                    return false;
                }
            });
        });
    }
  </script>

  <!--加载验证码-->
  <script type="text/javascript">
      getvCode();
      /**
       * 获取验证码
       * 将验证码写到login.html页面的id = verifyimg 的地方
       */
      function getvCode() {
          document.getElementById("verifyimg").src = timestamp("/verifyCode");
          setTimeout(function(){
              $.ajax({
                  url: "/verify",
                  dataType: "json",   //返回格式为json
                  type: "GET",   //请求方式
                  success: function(req) {
                      //请求成功时处理，一般只用到这一个
                      $("#code").val(req.code);
                  }
              });
          },2000);
      }
      //为url添加时间戳
      function timestamp(url) {
          var getTimestamp = new Date().getTime();
          if (url.indexOf("?") > -1) {
              url = url + "&timestamp=" + getTimestamp
          } else {
              url = url + "?timestamp=" + getTimestamp
          }
          return url;
      };
  </script>
<!--动态背景样式-->
  <script>
      $(function() {
          var canvasBg = $('#canvasBg');
          if(canvasBg.length) {
              canvasBg.particleground({
                  dotColor: '#fff',
                  lineColor: '#f0f0f0'
              });
          }
      });
      $(document).ready(function() {
          $("#userpwd,#validatecode").keydown(function(e) {
              if(13 == e.keyCode) return logincheck(), !1
          })
      }), $(function() {
          var e = $(window).height();
          $(window).height();
          $(".frame_register").css("height", e), $(".main_register1").css("height", e), $(".register_bg").css("height", e), $(".web_L").css("height", e), $(".Guide_l").css("height", e), $("#class_max").css("height", e), $(".register_c").css("height", e), $(".logo_window").css("height", e), $(".or_div").css("height", e)
      });
  </script>
</html>